<template>
	<view v-if="showSeckill">
		<template v-if="config.activityModule == '1'&&activiceStatus">
			<view :style="inBgStyle" class="seckill-block" v-if="showHorizontal">
				<view class="flex ac jb seckill-title">
					<view class="flex ac jb seckill-header" :class="{'text-white': custom}">
						<view class="por seckill-text" v-if="config.ifShowName == '1'">
							<view class="text-hide f32">{{title}}</view>
							<!-- <view class="poa text-show">{{title}}</view> -->
						</view>
						<view class="flex-x-c" v-if="config.ifCountDown == '1'">
							<view class="start-text">{{isStart ? '距结束' : '距开始'}}</view>
							<count-down :bgColor="custom ? '#000' : '#FF004F'" :currentTime="currentTime" :endTime="isStart ? expireTime : effectiveTime" @timeOut="timeOut"></count-down>
							<image @click="clickMore" class="title-more" src="https://ss.migudm.cn/malleoc/activity/icon_more_line.png" v-if="!custom"></image>
							<image @click="clickMore" class="title-more" src="https://ss.migudm.cn/malleoc/activity/icon_more_line_white.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="seckill-list">
					<block v-for="(item, index) in list" :key="index">
						<view class="seckill-li" v-if="index <= 8" @tap="goDetails(item.spuId,index)">
							<view :class="['img', {'ac-sale-out': item.productStatus}]">
								<image class="img" :src="item.imgUrl"></image>
							</view>
							<view class="seckill-information">
								<view class="ellipsis title">{{item.labels||''}}{{item.productName}}</view>
								<view class="price"><text class="f18">{{priceBefore}}</text>{{ item.actPrice | coursePriceForm('Int') }}<text class="f18">{{ item.actPrice | coursePriceForm }}</text>{{priceAfter}}</view>
								<view class="start-price" v-if="item.marketPrice && item.marketPrice > item.actPrice">￥{{priceConversion(item.marketPrice)}}</view>
							</view>
						</view>
					</block>
					<view class="seckill-li-more" @tap="clickMore" v-if="list.length >= 8">
						<image class="more-ico" src="https://resource.migudm.cn/group1/M00/D0/DD/oYYBAGPoiFOAWkGAAAAK0CXOYgE019.png"></image>
					</view>
				</view>
			</view>
		</template>
		<seckill-vertical v-else :type="type" :participantType="participantType" :activityIdList="activityIdList" :config="initializationParams" :isDetailPage="false"></seckill-vertical>
	</view>
</template>

<script>
	import countDown from '@/components/countDown.vue'
	import seckillVertical from '@/components/userDefinedPage/seckill/seckillVertical.vue'
	export default {
		components: {
			countDown,
			seckillVertical
		},
		props: {
			fragmentLength:{
				type:Number,
				default:0
			},
			initializationParams: {
				type: String,
				default: ''
			},
			//来源模块在页面的排序序号
			moduleOrder: {
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				activiceStatus:true, //秒杀活动暂停状态
				config: null,
				activityId: '',
				type: '', // 01秒杀全网 03秒杀会员 02拼团全网 04拼团会员
				title: '', // 标题
				list: [],
				currentTime: '', // 当前时间
				effectiveTime: '', // 开始时间
				expireTime: '', // 结束时间
				isStart: true,
				showSeckill: false,
				showHorizontal: false,
				custom: false,
				outBgStyle: '',
				inBgStyle: 'background:#FFF', // 组件内部背景样式
				participantType: 1, // 活动参与者类型
				activityIdList: [] // 活动id列表
			}
		},
		created() {
			let initializationParams = JSON.parse(this.initializationParams)
			this.config = initializationParams
			this.type = initializationParams.type
			this.title = initializationParams.title
			this.activityIdList = initializationParams.activityId
			if(initializationParams.isfooterImage == 2){
				this.custom = true
				if(initializationParams.comImgType == 1 && initializationParams.comImg){
					this.inBgStyle = 'background-image:url('+initializationParams.comImg+');background-repeat:round;'
				}else if(initializationParams.comImgType == 2 && initializationParams.comColor){
					this.inBgStyle = 'background:'+initializationParams.comColor
				}
			}

			const participantType = initializationParams.type == '03' ? 2 : this.participantType
			this.participantType = participantType
			// 如果当前为会员模块，且用户非会员，不展示
			if (this.participantType == 2 && !this.isVip) return
			this.showSeckill = true
			if (initializationParams.activityModule == '2') return
			let apiUrl = 'activity/queryCurrentActivity'
			let params = {
				participantType: participantType
			}
			if (initializationParams.activityId) {
				apiUrl = 'activity/queryActivityDetail'
				params.activityId = initializationParams.activityId[0]
			}
			this.$request(apiUrl, params).then(async(data) => {
				if (data.objectItems && data.objectItems.length) {
					this.activityId = data.activity.id
					this.activiceStatus = data.activity.status==1
					this.list = data.objectItems
					let sysTime = await this.$utils.getNowTime()
					if (sysTime.sysTime) {
						this.currentTime = new Date(this.$utils.formatTime(sysTime.sysTime)).getTime()
					} else {
						this.currentTime = new Date().getTime()
					}
					this.effectiveTime = new Date(this.$utils.formatTime(data.activity.effectiveTime)).getTime()
					this.expireTime = new Date(this.$utils.formatTime(data.activity.expireTime)).getTime()
					this.isStart = this.currentTime > this.effectiveTime
					this.showHorizontal = this.currentTime <= this.expireTime
				} else {
					this.showHorizontal = false
				}
			},error => {
				this.showHorizontal = false
			})
		},
		methods: {
			// 获取横版
			// 倒计时结束
			timeOut() {
				if (this.isStart) {
					this.showHorizontal = false
				} else {
					this.isStart = true
				}
			},
			clickMore () {
				const activityIdList = this.activityIdList ? this.activityIdList.join(",") : ''
				// isHorizontal 是否横版秒杀组件
				this.$routeUtils.navigateTo({
					url: `/package_activity/spell/spellKillList?type=${this.type}&participanttype=${this.participantType}&activityidlist=${activityIdList}&config=${this.initializationParams}&enterId=${this.activityId}&isHorizontal=${true}`
				})
			},
			goDetails (spuId,index) {
				if (this.participantType == 2) {
					// 会员专场
					if (!this.$globalData.state.token) {
						// 未登录
						// this.$utils.toast("您未登陆")
						this.$Login.login({
							site: '/pages/index/index'
						})
						return
					} else if (!this.isVip) {
						this.$utils.toast("您还不是咪咕PLUS会员，无法购买~")
						return
					}
				}
				var statInfo = {'Ref_Module_Order':this.moduleOrder,'Ref_Module_Type':this.title,'Ref_Module_ID':'1009','Ref_Module_Inner_Order':index+1}
				this.$routeUtils.navigateTo({
					url: '/pages/goods/detail?spuId=' + spuId
				},statInfo)
			},
			priceConversion(data) {
				return parseFloat(data/100)
			}
		}
	}
</script>

<style lang="scss">
	.title-more{
		width: 32rpx;
		height: 32rpx;
	}
	.seckill-block {
		padding-bottom: 34rpx;
		.text-white {
			color: #fff;
		}
		.seckill-title {
			color: #333;
			font-size: 26rpx;
			padding: 0rpx 24rpx;
			height: 102rpx;
			.seckill-header{
				width: 100%;
			}
			.seckill-text {
				font-size: 36rpx;
				font-weight:600;
				.text-hide{

				}
			}
			.start-text {
				margin: 0 8rpx;
			}
			.more {
				color: #999;
				font-size: 26rpx;
			}
		}
		.seckill-list {
			width: 100%;
			padding: 0 18rpx;
			overflow-y: auto;
			text-align: left;
			white-space: nowrap;
			box-sizing: border-box;
			.seckill-li {
				position: relative;
				width: 214rpx;
				height: 328rpx;
				margin: 0 6rpx;
				background: #fff;
				border-radius: 12rpx;
				display: inline-block;
				overflow: hidden;
				vertical-align: top;
				.img {
					width: 100%;
					height: 212rpx;
					display: block;
					background-color: #EAEAEA;
					border-radius: 12rpx 12rpx 0 0;
				}
				.img-mask-wrapper {
					position: absolute;
					top: 0;
					left: 0;
				}
				.seckill-information {
					margin: 0 8rpx;
					text-align: left;
					.title {
						padding: 10rpx 0 0;
						color: #333;
						font-size: 24rpx;
						line-height: 30rpx;
					}
					.price {
						color: #ff004f;
						font-size: 28rpx;
						line-height: 38rpx;
					}
					.start-price {
						color: #999;
						font-size: 22rpx;
						text-decoration: line-through;
						line-height: 28rpx;
					}
				}
			}
			.seckill-li-more {
				min-width: 116rpx;
				height: 328rpx;
				margin: 0 6rpx;
				background: #fff;
				border-radius: 12rpx;
				display: inline-block;
				vertical-align: top;
				.more-ico {
					width: 48rpx;
					height: 120rpx;
					margin-top: 104rpx;
					margin-left: 34rpx;
				}
			}
		}
	}
	.fixedHead{
		position: absolute;;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	// :class='$attrs.fragmentLength==1?"fixedHead":""'
	// :style="{ top: headerHeight + 'px' }" :class='fragmentLength==1?"fixedHead":""'
</style>
